<!--
 * @Descripttion: 
 * @Version: 
 * @Author: gaohj
 * @Date: 2023-01-12 11:45:13
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-01-12 14:32:35
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            // var pele = document.querySelector('p');
            // var bele = document.querySelector('button');
            // console.log(pele.id);
            // console.log(pele.className); // class是个关键字 
            // console.log(pele.myname); // 拿不到自定义属性
            // console.log(bele.disabled); // true 

            // pele.style.color = 'red';
            // pele.className = 'yyds'; // class 特殊 className
            // pele.haha = '999';  // 无效 不适合 自定义属性


            // pele.setAttribute('haha','999'); // 设置属性
            // pele.removeAttribute('index'); // 删除属性
            // console.log(pele.getAttribute('myname')); // 获取属性


            //  pele.setAttribute('id','whoami'); // 设置属性
            // pele.removeAttribute('class'); // 删除属性
            // console.log(pele.getAttribute('id'));

            // pele.setAttribute('data-user-name','北极星'); // 设置属性
            // pele.removeAttribute('data-user-name'); // 删除属性
           // console.log(pele.getAttribute('data-user-name'));
        

           // h5 自定义属性 

           var divEle = document.querySelector('div');
        //    console.log(divEle.dataset);
           // {userId: '001', userName: 'kangbazi'}
        //    console.log(divEle.dataset.userId);
        //    console.log(divEle.dataset.userName);


            divEle.dataset.userAge = 18; // data-user-age

            divEle.dataset.userName = '永远的神';
        
        }
    </script>
</head>
<body>
    <p id="test1" class="kangbazi" myname="panpan" index=1 >asdfsadf</p>
    <button disabled>sadfasdf </button>
    <div data-user-id="001" data-user-name="kangbazi" id="test">阿达SD</div>
</body>
</html>